import React, { useState } from 'react';

interface Options {
  key: React.Key;
  value: string;
}

interface Props {
  options: Options[];
  onChange?: (options: Options) => void;
  value?: React.Key;
}

const index = ({ options, onChange, value }: Props) => {
  const [optionsValue, setOptionsValue] = useState<React.Key>(value || options[0].key);

  const handleChangeOptions = (option: Options) => {
    setOptionsValue(option.key);
    onChange && onChange(option);
  };

  return (
    <div className="flex items-center rounded-md bg-[#F3F5F9] p-[2px]">
      {options.map((option) => (
        <div
          key={option.key}
          className={`h-[38px] flex-1 cursor-pointer rounded-md text-center text-cn-14 leading-[38px] ${
            optionsValue === option.key ? 'bg-white text-@brand-color' : 'text-text-3'
          }`}
          style={optionsValue === option.key ? { boxShadow: '0px 2px 10px 0px #00359114' } : {}}
          onClick={() => handleChangeOptions(option)}
        >
          {option.value}
        </div>
      ))}
    </div>
  );
};

export default index;
